<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>反馈</title>
    <link rel="stylesheet" href="/style/common.css" />
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
    <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.js"></script>
    <style>
        /*!*头部*!*/
        * {
            padding: 0;
            margin: 0;
        }
        .header {
            width: 100%;
            height: 44px;
            position: fixed;
            top: 0;
            background-color: #f26122;
            display: flex;
            align-items: center;
            z-index: 99;
        }

        .header-logo {
            display: inline-block;
            width: 57px;
            height: 28px;
            margin-left: 10px;
        }

        .header-logo img {
            width: 100%;
            height: 100%;
        }

        .header-menu {
            width: 45px;
            height: 24px;
            text-align: right;
            margin-right: 10px;
        }

        .header-menu  img {
            width: 24px;
            height: 100%;
        }

        .page-title {
            margin-right: 33px;
            color: #FFFFFF;
            flex: 1;
            text-align: center;
            padding-left: 10%;
        }

        .feedback-wrapper {
            padding-top: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-left: 16px;
            padding-right: 16px;
        }

        #feedback {
            height: 60px;
            width: 100%;
            border: none;
            border: 1px solid #999;
            color: #2D2F33;
            font-size: 14px;
        }

        .submit-feedback {
            align-self: flex-end;
            border: none;
            outline: none;
            color: #fff;
            background-color: #f26122;
            border-color: #46b8da;
            display: inline-block;
            padding: 6px 12px;
            font-size: 14px;
            font-weight: 400;
            text-align: center;
            cursor: pointer;
            border: 1px solid transparent;
            border-radius: 4px;
            margin-top: 16px;
        }
        #success-info {
            display: none;
            flex-direction: column;
            align-items: center;
            position: fixed;
            padding: 24px;
            top: 50%;
            left: 50%;
            border-radius: 4px;
            transform: translate3d(-50%, -50%, 0);
            color: #FFFFFF;
            background: rgba(0,0,0,.5);
        }
    </style>
</head>
<body>
<div class="header">
    <a href="index.html" class="header-logo">
        <img src="http://owtl83r0c.bkt.clouddn.com/logo.jpg"/>
    </a>
    <span class="page-title">页面反馈</span>
    <div class="header-menu">
        <img src="http://owtl83r0c.bkt.clouddn.com/type.png"/>
    </div>
</div>
<div class="feedback-wrapper">
    <textarea name="feedback" id="feedback" placeholder="请输入您宝贵的意见"></textarea>
    <button class="submit-feedback">提交</button>
</div>
<div id="success-info">
    <span>感谢您的反馈</span>
    <span>正在跳转首页...</span>
</div>
<script>
    $('.submit-feedback').on('click', function () {
        var data = {
            content : $('#feedback').val(),
            readed : 0
        }
        if (!$('#feedback').val()) {
            return
        }
        $.ajax({
            type: 'POST',
            url: '/rest/feedback',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function(data) {
                $('#success-info').css('display', 'flex')
                window.location.href ='/index'
            }
        })
    })
</script>
</body>
</html>